<!DOCTYPE html>
<html window-frame="solid-with-shadow">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style type="text/css">
	body{
		margin:0px;
	}//1234567890
	#Top {
		width: 100%;
		height:107px;
		margin-left: 0 auto;
		margin-right:0 auto;
		//border:0.5px solid;
		background: url(E://Technology//Project//MyGo//src//QQ//public//bg2.jpg);
		background-size:100% 100%;
	}
 
	#Bottom{
		width: 100%;
		height: 451px;
		//border:2px solid;
		margin: 0 auto;
		background-color:#EAEEF5;
		
	}
	#QQIcon{
		float:left;
		width:23px;
		height:22.5px;
		border:0.5px solid;
		background-color:black;
	}
	#Close{
		float:right;
		width:23px;
		height:22.5px;
		//border:0.5px solid;
		//background-color:black;
		font-size:small;
	}
	#CloseButton{
		border:0px;
		background:none;
		color:white;
	}
	#Info{
		position:absolute;
		top:23px;
		width:100%;
		height:60.4;
		//border:0.5px solid;
		padding-left:10px;
		padding-top:8px;
	}
	.ProfilePhoto{
		border-radius:50%;
		width:37px;
		height:37px;
	}
	.Photobox{
		//background-color:black;
		float:left;
		width:40px;
		height:40px;
		//border:1px solid;
	}
	.Space{
		float:left;
		width:10px;
		height:40px;
	}
	.Name{
		float:left;
		width:165px;
		height:20px;
		font-size:small;
		font-weight:500;
		color:black;
		//border:1px solid;
	}
	#Name{
		color:white;
	}
	.Sign{
		float:left;
		width:165px;
		height:20px;
		//border:1px solid;
		color:black;
		font-size:xx-small;
	}
	#Sign{
		color:white;
	}
	#Search{
		position:absolute;
		top:83.4px;
		width:100%;
		height:23.6;
		//border:0.5px solid;
		padding-top:2px;
		padding-left:2px;
		background-color:rgba(232,238,245,0.5);// -->70%的不透明度

	}
	#SearchIconv{
		float:left;
		height:20;
		width:20;
		//border:0.5px solid;
	}
	#SearchInput{
		position:relative;
		top:4px;
		left:21;
		color:white;
	}
	#Title{
		width:100%;
		height:30px;
		padding-left:5px;
		border-bottom:1px solid #DDE1E8;
		
	}
	#Title>div{
		float:left;
		width:31%;
		height:100%;
		//border:1px solid;
		padding-top:4px;

	}
	#Title>div>button{
		border:0px;
		background:none;
		margin-left:0px;
		width:90%;
		text-align:center;
		font-size:x-small;
		font-weight:600;
		color:#77797C;
	}
	#Main{
		height:380px;
		//border:1px solid;
		overflow-y:auto;
	}
	.Group{
		//height:20px;
		//border:1px solid;
	}
	
	.GroupButton{
		width:100%;
		height:20px;
		background:none;
		color:black;
		padding:0px;
	}
	.GroupButtonDiv{
		height:20px;
		width:100%;
		//border:1px solid;
		padding:0px;
	}
	.GroupButtonIcon{
		float:left;
		height:20px;
		width:20px;
		//border:1px solid;
	}
	.GroupName{
		float:left;
		//border:1px solid;
		height:100%;
		width:100px;
		text-align:left;
		padding-top:2px;
	}
	.Friends{
		height:80px;
		//border:1px solid;
		overflow-y:hidden;
		
	}
	.FriendButton{
		width:100%;
		height:40px;
		background:none;
		//color:black;
		padding:0px;
	}
	.Friend{
		height:40px;
		//border:1px solid;
		overflow-y:hidden;
	}
	/*
	#Minimum{
		float:right;
		width:25px;
		height:25px;
		border:2px solid;
		font-size:small;
	}
	#MinimumButton{
		border:0px;
		background:none;
		color:white;
	}
	#ManageSurface{
		float:right;
		width:25px;
		height:25px;
		border:2px solid;
		font-size:small;
	}
	#ManageSurfaceButton{
		border:0px;
		background:none;
		color:white;
	}
	*/
	</style>
	<script type="text/tiscript">
		self.root.on("ready", function() {
			//var userInfo = view.GetUserInfo();
			var userInfo = '{"QQ":1234567890,"Pwd":"","Sign":"okk","photoAddress":"../data/image/p1.jpeg","nickName":"SK","sex":"man","birthday":"1594877431","bloodType":"A","diploma":"无","telephone":"","email":"","address":""}';
			
			//var friendsData = view.GetFriendsData();
			//alert(JSON.parse(view.GetFriendsData()));
			var friendsData = '{"groups":{"1":"好友","2":"家人","3":"同学"},"groupsFriends":{"1":["1234567891","1234567894"],"2":["1234567892"],"3":["1234567893"]},"friends":{"1234567891":{"FriendQQ":1234567891,"Sign":"perfect1","photoAddress":"../data/image/p2.jpg","nickName":"SK1","groupId":1,"status":1},"1234567892":{"FriendQQ":1234567892,"Sign":"perfect2","photoAddress":"../data/image/p2.jpg","nickName":"SK2","groupId":2,"status":1},"1234567893":{"FriendQQ":1234567893,"Sign":"perfect3","photoAddress":"../data/image/p2.jpg","nickName":"SK3","groupId":3,"status":0},"1234567894":{"FriendQQ":1234567894,"Sign":"perfect4","photoAddress":"../data/image/p2.jpg","nickName":"SK4","groupId":1,"status":0}}}';
			initInterface(userInfo,friendsData);
		});
		
		function initMethod(){
			var list = self.$$(.Group>.GroupButton);
			for (var i=0;i<list.length;i++){
				list[i].on("click", function() {
					//this.parent.last.style["height"] = "50px";
					if (this.parent[1].style["display"]=="none"){
						this.first.first.attributes["src"] = "..//data//image//2.png";
						Unfoldx(this.parent.last,this.parent.last.length)
					}else{
						this.first.first.attributes["src"] = "..//data//image//1.png";
						Fold(this.parent[1],this.parent.last.length);
					}
				});
			}
			var friendButtons = $$(.FriendButton);
			for(var i = 0;i < friendButtons.length;i++){
				friendButtons[i].on("click",function(){
					alert(this.id);
				});
			}
		}
		
		function initFriend(friendObj){
			var friendButton = new Element("button");
			friendButton.attributes["class"]="FriendButton";
			friendButton.attributes["id"]=friendObj["FriendQQ"];
			if(friendObj["status"]=="0"){
				friendButton.style["background-color"]="white";
			}
			//friends.append(friendButton);
		
			var friend = new Element("div");
			friend.attributes["class"]="Friend";
			friend.attributes["id"]=friendObj["FriendQQ"];
			friendButton.append(friend);
			
			var photobox = new Element("div");
			photobox.attributes["class"]="Photobox";
			friend.append(photobox);
			
			var profilePhoto = new Element("img");
			profilePhoto.attributes["class"]="ProfilePhoto";
			//alert("ok");
			//alert(friendObj["photoAddress"]);
			profilePhoto.attributes["src"] = friendObj["photoAddress"];
			photobox.append(profilePhoto);
			
			var space = new Element("div");
			space.attributes["class"]="Space";
			friend.append(space);
			
			var name = new Element("div");
			name.attributes["class"]="Name";
			name.text = friendObj["nickName"];
			friend.append(name);
			
			var sign = new Element("div");
			sign.attributes["class"]="Sign";
			sign.text = friendObj["Sign"];
			friend.append(sign);
			return friendButton;
		}
		
		function initGroups(friendsData){
			var groups = $$(.Group);
			if (groups.length!=0){
				for(var i = 0;i<groups.length;i++){
					groups[i].remove();
				}
			}
			
			//alert(friendsData);
			friendsData = JSON.parse(friendsData);
			//alert(friendsData);
			for (var groupId in friendsData["groups"]){
				//alert(groupId);
				var group = new Element("div");
				group.attributes["class"]="Group";
				$(#Main).append(group);
				
				var groupButton = new Element("button");
				groupButton.attributes["class"]="GroupButton";
				group.append(groupButton);
				
				var groupButtonDiv = new Element("div");
				groupButtonDiv.attributes["class"]="GroupButtonDiv";
				groupButton.append(groupButtonDiv);
				
				var groupButtonIcon = new Element("img");
				groupButtonIcon.attributes["class"]="GroupButtonIcon";
				groupButtonIcon.attributes["src"] = "..//data//image//1.png";
				
				var groupName = new Element("div");
				groupName.attributes["class"]="GroupName";
				groupName.text = friendsData.groups[groupId];
				
				groupButtonDiv.append(groupButtonIcon);
				groupButtonDiv.append(groupName);
				
				
				var friends = new Element("div");
				friends.attributes["class"]="Friends";
				friends.style["display"]="none";
				friends.style["height"] = friendsData["groupsFriends"][groupId].length*40+"px";
				group.append(friends);
				var i=0;	//这里的i是因为登录之后，有些分组为空，但是默认是block的，点击后会出现奇怪的闪现，懒得找原因了，就加个变量吧。
				var Online = new Array()
				var Offline = new Array()
				for (var friendQQ in friendsData["groupsFriends"][groupId]){
					//alert(friendQQ);
					
					var friendButton = initFriend(friendsData["friends"][friendQQ]);
					if (friendsData["friends"][friendQQ]["status"]=="0"){
						Online.push(friendButton);
					}else{
						Offline.push(friendButton);
					}
					//alert("ok");
					i++;
				}
				if(i==0){
					friends.style["display"] = "none";
				}
				for(var i = 0;i<Online.length;i++){
					friends.append(Online[i]);
				}
				for(var i = 0;i<Offline.length;i++){
					friends.append(Offline[i]);
				}
				
			}
			initMethod();
		}
		
		function initInterface(userInfo,friendsData){
			userInfo = JSON.parse(userInfo);
			//alert(userInfo["QQ"])
			$(#profilePhoto).attributes["src"]=userInfo["photoAddress"];
			$(#Name).text = userInfo["nickName"];
			$(#Sign).text = userInfo["Sign"];
			/*初始化好友列表*/
			initGroups(friendsData);
		}
		//view.msgbox(#alert,$(.Group).attributes["class"])
		$(#CloseButton).on("click", function() {
		//关闭
			view.close();
		});
		$(#MessagesButton).on("click", function() {
			alert("This is MessagesButton")
		});
		$(#ContactsButton).on("click", function() {
			alert("This is ContactsButton")
		});
		$(#GroupChatsButton).on("click", function() {
			alert("This is GroupChatsButton")
		});
		function Unfoldx(friends,n){
			var maxH = n*40;
			var h = 0;
			friends.timer(10,function(){
				h += 10;
				if(h > maxH){
					friends.style["height"] = maxH + "px";
					friends.style["display"] = "block";
					return false;
				}else{
					friends.style["height"] = h + "px";
					friends.style["display"] = "block";
					
				}
				return true;
			});
		}
		function Fold(friends,n){
			var h = n*40;
			$(#Main).timer(10,function(){
				h -= 10;
				if(h < 0){
					friends.style["display"] = "none";
					return false;
				}else{
					friends.style["height"] = h+"px";
					return true;
				}
			});
		}
		
		function alert(info){
			view.msgbox(#alert,info)
		}
		function error(info){
			view.msgbox(#error,info)
			view.close()
		}
		view.isResizeable = false;
	</script>
</head>
<body role="window-caption">
<div id="Top">
	
	<div id="QQIcon">
		
	</div>
	<div id="Close">
		<button id="CloseButton">X</button>
	</div>
	<!-- <div id="Minimum"> -->
	<!-- <button id="MinimumButton">-</button> -->
	<!-- </div> -->
	<!-- <div id="ManageSurface"> -->
	<!-- <button id="ManageSurfaceButton">+</button> -->
	<div id="Info">
		<div id="photobox" class="Photobox">
			<img id="profilePhoto" class="ProfilePhoto" src="E:\Technology\Project\MyGo\src\QQ\application\client\data\image\p1.jpeg" />
		</div>
		<div id="Space" class="Space">
		</div>
		<div id="Name" class="Name" >
		</div>
		<div id="Sign" class="Sign">
			
		</div>
	</div>
	<div id="Search">
		<div id="SearchIconv"><img src="E:\Technology\Project\MyGo\src\QQ\public\search.png"></img></div>
		<div id="SearchInput">搜索</div>
	</div>

</div>

</div>
<div id="Bottom">

	<div id="Title">
		<div id="Messages" class="title">
			<button id="MessagesButton">消息</button>
		</div>
		<div id="Contacts" >
			<button id="ContactsButton">联系人</button>
		</div>
		<div id="GroupChats">
			<button id="GroupChatsButton">群聊</button>
		</div>
	</div>
	<div id="Main">
		<!-- <div class="Group"> -->
			<!-- <button class="GroupButton"> -->
				<!-- <div class="GroupButtonDiv"> -->
					<!-- <div class="GroupButtonIcon"> -->
						
					<!-- </div> -->
					<!-- <div class="GroupName"> -->
					<!-- 朋友 -->
					<!-- </div> -->
				<!-- </div> -->
			<!-- </button> -->
			<!-- <div class="Friends"> -->
				<!-- <div class="Friend"> -->
					
				<!-- </div> -->
				<!-- <div class="Friend"> -->
					
				<!-- </div> -->
			<!-- </div> -->
		<!-- </div> -->
		<!-- <div class="Group" > -->
			<!-- <button class="GroupButton"> -->
				<!-- <div class="GroupButtonDiv"> -->
					<!-- <div class="GroupButtonIcon"> -->
						
					<!-- </div> -->
					<!-- <div class="GroupName"> -->
					<!-- 家人 -->
					<!-- </div> -->
				<!-- </div> -->
			<!-- </button> -->
			<!-- <div class="Friends"> -->
				<!-- <div class="Friend"> -->
					
				<!-- </div> -->
				<!-- <div class="Friend"> -->
					
				<!-- </div> -->
			<!-- </div> -->
		<!-- </div> -->
	</div>
</div>

</body>
</html>